@import 'theme';
@import 'functions';
@import 'mixins';

$cx-search-grid-image-width: 100% !default;
$cx-search-grid-image-align: center !default;
$cx-search-grid-image-trbl-padding: 20px 20px 20px 20px !default;
$cx-search-grid-image-sm-padding-top: 1.25rem !default;

$cx-search-grid-name-trbl-margin: 0 0 25px 0 !default;
$cx-search-grid-name-color: 'dark' !default;
$cx-search-grid-name-hover-color: 'primary' !default;
$cx-search-grid-name-align: center !default;
$cx-search-grid-name-height: 2.4em !default;

$cx-search-grid-name-after-background-color: 'inverse' !default;
$cx-search-grid-name-after-width: 100% !default;
$cx-search-grid-name-after-height: 50px !default;
$cx-search-grid-name-after-background: none repeat scroll 0% 0% !default;

$cx-search-grid-name-before-bottom: 0 !default;
$cx-search-grid-name-before-right: 0 !default;

$cx-search-grid-price-trbl-margin: 0 0 25px 0 !default;
$cx-search-grid-price-align: center !default;

$cx-search-grid-price-old-color: 'secondary' !default;
$cx-search-grid-price-old-trbl-margin: 0 0 0 0 !default;
$cx-search-grid-price-new-color: 'primary' !default;
$cx-search-grid-price-new-trbl-margin: 0 0 25px 5px !default;

.cx-product {
  &-search-grid__image--container {
    display: block;
    text-align: $cx-search-grid-image-align;
  }

  &-search-grid__image {
    width: $cx-search-grid-image-width;
    padding: $cx-search-grid-image-trbl-padding;
    display: block;

    @include media-breakpoint-down(sm) {
      padding-top: $cx-search-grid-image-sm-padding-top;
    }
  }

  &-search-grid__name {
    @include type('5');
    text-align: $cx-search-grid-name-align;
    display: block;
    margin: $cx-search-grid-name-trbl-margin;
    @include var-color('color', $cx-search-grid-name-color);
    text-decoration: none;
    height: $cx-search-grid-name-height;
    overflow: hidden;
    position: relative;

    &:before {
      bottom: $cx-search-grid-name-before-bottom;
      position: absolute;
      right: $cx-search-grid-name-before-right;
      content: '…';
    }

    &:after {
      content: '';
      background: $cx-search-grid-name-after-background;
      @include var-color(
        'background-color',
        $cx-search-grid-name-after-background-color
      );
      position: absolute;
      height: $cx-search-grid-name-after-height;
      width: $cx-search-grid-name-after-width;
      z-index: 1;
    }

    &:hover {
      @include var-color('color', $cx-search-grid-name-hover-color);
    }
  }

  &-search-grid__rating {
    text-align: center;
  }

  &-search-grid__price--container {
    text-align: $cx-search-grid-price-align;
  }

  &-search-grid__price {
    @include type('3');
    text-align: $cx-search-grid-price-align;
    display: inline-block;
    margin: $cx-search-grid-price-trbl-margin;

    &--old {
      @include var-color('color', $cx-search-grid-price-old-color);
      text-decoration: line-through;
      margin: $cx-search-grid-price-old-trbl-margin;
    }

    &--new {
      margin: $cx-search-grid-price-new-trbl-margin;
      @include var-color('color', $cx-search-grid-price-new-color);
    }
  }
}
